<template>
	<view class="content">
		<view class="mingxi-list">
			<mescroll-uni class='scroll_top' :down="downOption" @down="downCallback" @up="upCallback">
				<view class="news-li mingxi-items" v-for="(item,index) in dataList" :key="index">
					<view class="mingxi-tittle" v-if='item.status==1'>个人消费</view>
					<view class="mingxi-tittle" v-if='item.status==2'>拓展店铺</view>
					<view class="mingxi-tittle" v-if='item.status==3'>省级代理</view>
					<view class="mingxi-tittle" v-if='item.status==4'>市级代理</view>
					<view class="mingxi-tittle" v-if='item.status==5'>区县代理</view>
					<view class="mingxi-tittle" v-if='item.status==6'>康养好友消费</view>
					<view class="mingxi-tittle" v-if='item.status==7'>一般平台好友消费</view>
					<view class="mingxi-tittle" v-if='item.status==8'>团队好友消费</view>
					<view class="mingxi-bottom">
						<view class="mingxi-time">2019-05-14-09:00</view>
						<view  class="mingxi-money" v-if='item.profitMoney>=0'>+{{item.profitMoney}}</view>
						<view  class="mingxi-money" v-if='item.profitMoney<0'>{{item.profitMoney}}</view>
					</view>
				</view>
			</mescroll-uni>
			
		</view>

		<view class="info-over" v-if='noData'>
			<view class="line-l"></view>
			<view class="info-text">所有记录已加载完</view>
			<view class="line-r"></view>
		</view>

	</view>
</template>

<script>
	import http from 'common/http.js'
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				 noData:false,
                 transDetailsDatas:[],//交易列表数据
				 downOption: {
				 	auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
				 },
				 dataList: [],
			}
		},
		onLoad() {

		},
		methods: {
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				//联网加载数据
				this.getListDataFromNet(0, 1, (data) => {
					//联网成功的回调,隐藏下拉刷新的状态
					mescroll.endSuccess();
					//设置列表数据
					//this.dataList.unshift(data[0]);
					this.dataList = data;
				}, () => {
					//联网失败的回调,隐藏下拉刷新的状态
					mescroll.endErr();
				})
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
				//联网加载数据
				this.getListDataFromNet(mescroll.num, mescroll.size, (curPageData)=>{
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
					console.log("mescroll.num=" + mescroll.num + ", mescroll.size=" + mescroll.size + ", curPageData.length=" + curPageData.length);
			
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
			
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
			
					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
			
					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
					mescroll.endSuccess(curPageData.length);
			
					//设置列表数据
					this.dataList=this.dataList.concat(curPageData);
				}, () => {
					//联网失败的回调,隐藏下拉刷新的状态
					mescroll.endErr();
				})
			},
			async  getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
					try {
						var that=this;
						let newArr = [];
						 if (pageNum == 0) {
							//此处模拟下拉刷新返回的数据
							let opts={
			                        url: 'https://az49.ujquan.com/store/api/profit-sharing-server/v1/profit/list?userId=302014&pageSize=12&pageNum=1',
			                        method: 'GET'
                               };
				               let param={};
				               await http.httpTokenRequest(opts, param).then(res => { //接口请求成功处理
							   let datas = res.data.data;
							    console.log(datas);
							   newArr=[];
							   for(var i=0;i<datas.length;i++){
									 newArr.push(datas[i]);
								}
								 
				                 },error => {//接口请求失败
								console.log(error);
							}) 
							
						} else {
							let opts={
			                        url: 'https://az49.ujquan.com/store/api/profit-sharing-server/v1/profit/list?userId=302014&pageSize=12&pageNum='+pageNum+'',
			                        method: 'GET'
					                  };
				            let param={};
				            await http.httpTokenRequest(opts, param).then(res => { //接口请求成功处理
								  let datas = res.data.data;
								  console.log(datas);
								  if(datas.length<pageSize){//数据加载完
									  this.noData = true;
								  }
								  for(var i=0;i<datas.length;i++){
									 newArr.push(eval(datas[i]));
								  }
								 
				            },error => {//接口请求失败
								console.log(error);
							}) 
							
					  }
						
						successCallback && successCallback(newArr);
					} catch (e) {
						//联网失败的回调
						errorCallback && errorCallback();
					}
				
			},
			
			goMingxi() {
				uni.navigateTo({
					url: ''
				})
			},
		    getTransData(){
					var that=this;
					let opts={
		                        url: 'https://az49.ujquan.com/store/api/user-server/v1/userCapitalRecords?userid=302014&pageSize=1&pageNum=10',
		                        method: 'GET'
			                    };
			                 let param={};
			                 http.httpTokenRequest(opts, param).then(res => { //接口请求成功处理
							  this.profitData =res.data.data;
							   //console.log(res.data.data);
							  console.log(this.profitData);
			                        
			                 },error => {//接口请求失败
							console.log(error);
						})
				}
		},
		
	}
</script>

<style>
	page {
		background: rgba(245, 245, 245, 1);
	}
    .scroll_top{
		margin-top:120px;
	}
	.content {
		width: 100%;
		height: 100%;
		padding-bottom: 10px;
	}

	.mingxi-list {
		height: 100%;
		width: 100%;
		margin-top: 50px;
	}

	.mingxi-items {
		width: 100%;
		height: 50px;
		position: relative;
		border-bottom: #F5F5F5 1px solid;
		background: rgba(255, 255, 255, 1);
	}

	.mingxi-tittle {
		height: 13.5px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(102, 102, 102, 1);
		line-height: 13.5px;
		position: absolute;
		display: flex;
		top: 11px;
		left: 11.5px;
	}

	.mingxi-tittle a {
		height: 9px;
		font-size: 10px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);
		line-height: 9px;
		padding-left: 7px;
		margin-top: 4px;
	}

	.mingxi-time {
		height: 12.5px;
		font-size: 11px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);
		position: absolute;
		top: 31px;
		left: 11.5px;
	}

	.mingxi-bottom {
		width: 100%;
		height: 15px;
		display: flex;
	}

	.mingxi-money {
		position: absolute;
		right: 12.5px;
		top: 25px;
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(254, 67, 56, 1);
	}

	.info-over {
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.line-l {
		width: 83px;
		height: 1px;
		background: rgba(204, 204, 204, 1);
		border-radius: 50%;
	}

	.line-r {
		width: 83px;
		height: 1px;
		background: rgba(204, 204, 204, 1);
		border-radius: 50%;
	}

	.info-text {
		margin: 0 9px 0 11px;
		font-size: 11px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(204, 204, 204, 1);
		line-height: 49px;
	}
</style>
